<template>
    <div class="support">
        <ul>
            <li v-for="item in brandList" :key="item.id" @click="clickFn(item.id)">
                <img v-lazy="item.pic_url" alt="">
                <h4>{{ item.name }}</h4>
                <p>{{ item.floor_price | moneyFlrmat }}</p>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'support',
    props: ['brandList'],

    methods: {
        clickFn(id) {
            this.$router.push({ path: '/brand', query: { id: id } })
        }
    }
}
</script>

<style lang="less" scoped>
.support>ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    li {
        width: 49%;
        position: relative;

        img {
            width: 100%;
        }

        h4 {
            font-size: 16px;
            position: absolute;
            left: 20px;
            top: 30px;
        }

        p {
            font-size: 15px;
            position: absolute;
            left: 30px;
            top: 60px;
            color: red;
        }

    }
}</style>